import React, { memo, useState, useRef } from 'react'
import { CenterWrapper } from './style'
import IconSearchBar from '@/assets/svg/icon-search-bar'
import SearchTabs from './cpns/search-tabs'
import searchTitles from '@/assets/data/search_titles.json'
import SearchSections from './cpns/search-sections'
import { CSSTransition } from 'react-transition-group'

const HeaderCenter = memo((props) => {
    const { isSearch, searchBarClick } = props
    const [tabIndex, setTabIndex] = useState(0)
    // 获取搜索标题数据
    const titles = searchTitles.map(item => item.title)

    const searchBarRef = useRef(null); // 创建 Ref
    const searchDetailRef = useRef(null); // 创建 Ref

    // 点击搜索按钮
    function searchBarClickHandle() {
        if (searchBarClick) searchBarClick()
    }

    return (
        <CenterWrapper>
            {/* 初始搜索框 */}
            <CSSTransition in={!isSearch} classNames="bar" timeout={250} unmountOnExit={true} nodeRef={searchBarRef}  >
                <div ref={searchBarRef} className="search-bar" onClick={searchBarClickHandle}>
                    <div className="text">
                        搜索房源和体验
                    </div>
                    <div className="icon">
                        <IconSearchBar />
                    </div>
                </div>
            </CSSTransition>
            {/* 点击搜索框后展示 */}
            <CSSTransition in={isSearch} classNames="detail" timeout={250} unmountOnExit={true} nodeRef={searchDetailRef} >
                <div ref={searchDetailRef} className='search-detail'>
                    <SearchTabs titles={titles} tabClick={setTabIndex} />
                    <div className="infos">
                        <SearchSections searchInfos={searchTitles[tabIndex].searchInfos} />
                    </div>
                </div>
            </CSSTransition>
        </CenterWrapper>
    )
})

export default HeaderCenter